<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>My HTML Template</title>
		<style type="text/css">
			div#header {
				color: #0066FF;
				font-size: 25pt;
			}
			
			div#content {
				color: #B088FF;
				font-size: 12pt;
			}
		</style>
		<!-- embed jquery by google，藉由google動態嵌入jquery 1.4.4 -->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" language="javascript">
			google.load( "jquery", "1.4.4" );
		</script>
		<script type="text/javascript">
			$( document ).ready( function() {
				var add = function( x, y ) {
					return x + y;
				};
				
				var sub = function( x, y ) {
					return x - y;
				};
				
				// 注意!!! 是用 add 來替換 sub!!!
				var result = add.call( sub, 10, 5 );
				alert( result );  // 印出15，而不是5
				
				var sayHello = function showHelloMsg() {
					var isMale = confirm( "Hello, are you boy?" );
					
					if( isMale ) {
						$( "#productPrice" ).append(
							"<span style='color:blue'>Hello Boy</span>"
						);
					} else {
						$( "#productPrice" ).append(
							"<span style='color:red'>Hello Girl</span>"
						);
					}
					
				};
				
				var sayNothing = function() {};
				
				sayHello.call( sayNothing );
				
				/**********************************************************************/
				
				// 建構子函式
				function Product1( price ) {
					this.productName = "UX21";
					this.price = price;
					this.toString = function() {
						return this.productName;
					};
					this.totalPrice = function( price, discount ) {
						var currentPrice = price * discount;
						return currentPrice;
					};
				}
				
				// 建構子函式
				function Product2( price ) {
					this.productName = "AA20";
					this.price = price;
				}
				
				var p1 = new Product1( 500 );
				var p2 = new Product2( 400 );
				
				// 注意，call 的意思是把 p1 的方法放到 p2 上執行，
				// 原本 p2 是没有toSting() 函式，现在是把 p1 的toString()方法放到 p2 上來執行
				var productName = p1.toString.call( p2 );
				$( "#content" ).html( productName );  // 在content上顯示出AA20
				
				var prod1 = new Product1( 6000 );
				var prod2 = new Product2( 5000 );
				var productPrice = prod1.totalPrice.call( prod2, prod2.price, 0.9 );
				$( "#productPrice" ).html( "Product2 price is <b>" + productPrice + "</b>" );

			});
		</script>
		
	</head>
	
	<body>
		<div title="temp1" id="header">Hello HTML</div>
		<div title="temp1" id="content">Here is content</div>
		<div title="Product Price" id="productPrice"></div>
	</body>
</html>